<template>
  <div>
    <ARow class="enter-x">
      <ACol :span="14">
        <Card class="mr-1 card-brief">
          <span class="card-title">基本信息</span>
          <div :class="`${prefixCls}-info`">
            <div :class="`${prefixCls}-header-img`">
              <Avatar :src="userInfo.avatar || headerImg" :size="84" shape="square" class="!mx-auto !block" />
            </div>

            <Description style="width: 100%" @register="register" />
          </div>
        </Card>
      </ACol>
      <ACol :span="10">
        <Card class="ml-1 card-brief">
          <span class="card-title">权益信息</span>
          <div :class="`${prefixCls}-info`">
            <Description style="width: 100%" @register="registerEquity" />
          </div>
        </Card>
      </ACol>

      <ACol :span="24">
        <Card class="mt-2 card-brief">
          <span class="card-title">账户明细</span>
          <div :class="`${prefixCls}-account-detail`">
            <Tabs v-model:activeKey="activeKey" :tabBarGutter="25">
              <TabPane v-for="item in accountDetailTabs" :tab="item.name" :key="item.accountType">
                <component :is="item.component" :accountType="item.accountType" :memberId="userId" />
              </TabPane>
            </Tabs>
          </div>
        </Card>
      </ACol>
    </ARow>
  </div>
</template>
<script lang="ts" setup>
  import { Card, Col, Row } from "ant-design-vue"
  import { ref, computed, unref, useAttrs, onMounted } from "vue"
  import { Space, Upload, Avatar, Tabs, TabPane } from "ant-design-vue"
  import { Description, DescItem, useDescription } from "/@/components/Description/index"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useRoute, useRouter } from "vue-router"
  import { getUserDetails } from "/@/api/member/user.api"
  import { baseInfoDescSchema, equityInfoDescSchema, ACCOUNT_TYPE } from "./user.data"
  import AccountDetailList from "./AccountDetailList.vue"

  const router = useRouter()
  let id = router.currentRoute.value.query?.id
  console.log("currentRoute.params: " + id)

  const { prefixCls } = useDesign("member-detail")
  const ACol = Col
  const ARow = Row
  const activeKey = ref(ACCOUNT_TYPE.POINT)
  const userInfo = ref<any>({})
  const userId = ref<any>(id)
  const headerImg = "/default-avatar.png"

  const [register] = useDescription({
    bordered: false,
    data: userInfo,
    schema: baseInfoDescSchema,
  })

  const [registerEquity] = useDescription({
    bordered: false,
    data: userInfo,
    schema: equityInfoDescSchema,
  })

  onMounted(async () => {
    userInfo.value = await getUserDetails({ id })
  })

  const accountDetailTabs = [
    {
      accountType: ACCOUNT_TYPE.POINT,
      name: "积分",
      component: AccountDetailList,
    },
    {
      accountType: ACCOUNT_TYPE.EXPERIENCE,
      name: "成长值",
      component: AccountDetailList,
    },
  ]
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-member-detail";

  .@{prefix-cls} {
    &-info {
      display: flex;
      margin-top: 10px;
      height: 220px;
    }

    &-account-detail {
      display: flex;
      margin-top: 10px;
    }

    &-header-img {
      margin-right: 15px;
    }
  }
</style>
